<template>
	<m-page :pageData="pageData">
		<view class="" slot="content">
			<m-form 
			:list="formList" 
			labelPosition="left" 
			:labelWidth="130"
			:classes="'wauto w210'"
			@submit="submit"
			@extendFunc="extendFunc"
			></m-form>
		</view>
	</m-page>
</template>

<script>
	export default {
		name:'forgetPwd',
		data() {
			return {
				pageData:{
					showBrand:true,
					title:'账号手机号',
					tips:'phoneRule'
				},
				isFirst:true,
				isEmail:false,
				formList:[],
				formList1:[
					{
						label:'当前账号手机号：',
						placeholder:'请输入',
						tag:'phone',
						type:'mobile',
						classes:'noBorder',
						value:'15727050672',
						disabled:true,
					},
					{
						label:'填写验证码：',
						placeholder:'输入验证码',
						tag:'old_code',
						type:'mobile',
						ptag:'phone',
						icon:'send',
						max:10,
						request_type:'3',
						cmd:'send_phone_code',
						text:'发送验证码',
						message:'填写正确的手机验证码',
						rules:{
							type: 'string',
							required: true,
							message:'填写正确的手机验证码',
						},
					},
					{
						button:true,
						disabled:false,
						submit:true,
						func:'submit',
						type:'',
						btn:'下一步',
						btnStyle:{
							color:'#fff',fontSize:'16px',
							background:'#16b7ff',borderRadius:'5rpx',
							
						},
						classes:'noBorder pt50 w145 ml130'
					},{
						errorMsg:true,
						func:'extendFunc',
						type:'text',
						style:{
							color:'#26bbff',
							textDecoration: 'underline',
							cursor: 'pointer'
							
						},
						text:'当前手机号无法使用，切换为验证邮箱',
						classes:'noBorder pb70 ml130',
					}
				],
				formList2:[
					{
						label:'填写新手机号：',
						placeholder:'填写您的新手机号',
						tag:'new_phone',
						type:'phone',
						max:11,
						rules:{
							type: 'string',
							required: true,
							message: '请输入正确的手机号码',
							trigger: ['validate'],
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
						},
					},
					{
						label:'验证码：',
						placeholder:'请填写手机验证码',
						tag:'new_code',
						type:'mobile',
						ptag:'new_phone',
						max:10,
						icon:'send',
						request_type:'4',
						cmd:'send_phone_code',
						text:'发送验证码',
						message:'填写正确的手机验证码',
						rules:{
							type: 'string',
							required: true,
							message:'填写正确的手机验证码',
						},
					},
					{
						button:true,
						disabled:false,
						submit:true,
						func:'submit',
						type:'',
						btn:'立即提交',
						btnStyle:{
							color:'#fff',fontSize:'16px',
							background:'#16b7ff',borderRadius:'5rpx',
							
						},
						classes:'noBorder pt50 w145 ml130'
					},
					{
						errorMsg:true,
						func:'goBack',
						func:'extendFunc',
						type:'text',
						style:{
							color:'#26bbff',
							textDecoration: 'underline',
							cursor: 'pointer'
							
						},
						text:'当前手机号无法使用，切换为验证邮箱',
						classes:'noBorder pb70 ml130',
						
					},
				],
				formList3:[
					{
						label:'当前账号邮箱：',
						tag:'email',
						type:'email',
						classes:'noBorder',
						value:'',
						disabled:true,
					},
					{
						label:'填写验证码：',
						placeholder:'输入验证码',
						tag:'old_code',
						type:'email',
						ptag:'email',
						icon:'send',
						max:10,
						request_type:'5',
						cmd:'send_email_code',
						text:'发送验证码',
						message:'填写正确的邮箱验证码',
						rules:{
							type: 'string',
							required: true,
							message:'填写正确的邮箱验证码',
						},
					},
					{
						button:true,
						disabled:false,
						submit:true,
						func:'submit',
						type:'',
						btn:'下一步',
						btnStyle:{
							color:'#fff',fontSize:'16px',
							background:'#16b7ff',borderRadius:'5rpx',
							
						},
						classes:'noBorder pt50 w145 ml130'
					},{
						errorMsg:true,
						func:'extendFunc',
						type:'text',
						style:{
							color:'#26bbff',
							textDecoration: 'underline',
							cursor: 'pointer'
							
						},
						text:'当前邮箱无法使用，切换为验证手机号',
						classes:'noBorder pb70 ml130',
					}
				],
			};
		},
		onReady() {
			
		},
		onLoad() {
			let sys = uni.getSystemInfoSync()
			if(sys.screenWidth < 1024){
				this.formList1[0].borderBottom = true;
				this.formList1[1].borderBottom = true;
				this.formList1[1].classes = 'noBorder w108';
				this.formList1[2].classes = 'noBorder';
				this.formList1[3].classes = 'noBorder';
				
				
				this.formList2[0].borderBottom = true;
				this.formList2[1].borderBottom = true;
				this.formList2[0].classes = 'noBorder';
				this.formList2[1].classes = 'noBorder w108';
				this.formList2[2].classes = 'noBorder';
				this.formList2[3].classes = 'noBorder';
				
				this.formList3[0].borderBottom = true;
				this.formList3[1].borderBottom = true;
				this.formList3[1].classes = 'noBorder w108';
				this.formList3[2].classes = 'noBorder';
				this.formList3[3].classes = 'noBorder';
			}
			this.formList = this.formList1
			if(this.loginInfo.phone){
				this.setPhoneList()
			}else{
				this.isEmail = true
				if(!this.loginInfo.phone){
					this.formList3 = this.formList3.slice(0,3)
					this.formList2 = this.formList2.slice(0,3)
				}
				this.setEmailList()
			}
			
		},
		methods:{
			setEmailList(){
				this.formList = this.formList3.map(item =>{
					item.value = this.loginInfo[item.tag]
					return item
				})
			},
			setPhoneList(){
				this.formList = this.formList1.map(item =>{
					item.value = this.loginInfo[item.tag]
					return item
				})
			},
			extendFunc(){
				this.isEmail = !this.isEmail
				if(this.isEmail){
					this.formList = this.formList3
					this.setEmailList()
				}else{
					this.formList = this.formList1
					this.setPhoneList()
				}
			},
			submit(val){
				this.params = {
					...this.params,
					...val,
				}
				if(!this.isEmail){
					this.params.up_type = "4"
					this.params.old_phone = this.params.phone
				}else{
					this.params.up_type = "5"
					this.params.old_email = this.params.email
				}
				if(!this.isFirst){
					this.$api.update_user_settings(this.params).then(res => {
						if(res.code == 200){
							uni.showToast({
								title:'修改成功！',
								icon:'none',
							})
							setTimeout(()=>{
								this.utils.goBack()
							},1500)
						}else{
							uni.showToast({
								title:res.message,
								icon:'none',
							})
						}
					})
					return
				}
				debugger
				this.formList = this.formList2
				this.isFirst = false;
			}
		}
	}
</script>

<style lang="scss">

</style>
